<style>
html {
  font-family: sans-serif;
}

form {
  display: table;
  margin: 0 autopx;
}

form div {
  display: table-row;
}

form label,
form input {
  display: table-cell;
  margin-bottom: 10px;
}

form label {
  width: 200px;
  padding-right: 5%;
  text-align: right;
}

form input {
  width: 300px;
}

.top {
  display: table-header-group;
  caption-side: bottom;
  width: 300px;
  color: #666;
  font-style: italic;
}
.bottom {
  /** 设置为表格尾部。
  display: table-footer-group; **/
  
  /** 设置为表格标题，然后再设置caption-side为底部 **/
  display: table-caption;
  caption-side: bottom;
  width: 300px;
  color: #999;
  font-style: italic;
}
</style>
<form>
  <p class="top">首先，告诉我们你的名字和年龄。</p>
  <p class="bottom">然后，完毕后请再次确定信息是否有误。</p>
  <div>
    <label for="fname">First name:</label>
    <input type="text" id="fname" />
  </div>
  <div>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" />
  </div>
  <div>
    <label for="age">Age:</label>
    <input type="text" id="age" />
  </div>
</form>
